<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这次是表单</title>
</head>
<body>
<p>表单主要用于搜集用户输入的数据，并且将这些数据传到服务器上</p>
<p>首先是input标签,是用的最多的标签，用于接收用户的输入或者是选择</p>
<p>不同的输入内容选择不同的type</p>
<ul>
    <li>单行文本框 type为text</li>
    <li>密码输入框 type为password</li>
    <li>数字输入框 type为number</li>
    <li>邮箱输入框 type为email</li>
    <li>日期框 type为date</li>
    <li>时间输入框 type为time</li>
    <li>颜色输入框 type为color</li>
    <li>单选框 type为radio</li>
    <li>复选框 type为checkbox</li>
    <li>文件上传 type为file</li>
    <li>提交 type为submit</li>
    <li>重置 type为reset</li>
</ul>
<p>下面来一个demo试试</p>
<form id="userform" action="your url" method="post" title="用户注册表单" target="_self" enctype="multipart/form-data">
    <fieldset>
        <legend>用户注册信息</legend>
        <br>
        昵称：<input type="text" name="un" maxlength="15"value="tom">
        <br>
        <br>
        密码：<input type="password"name="pw"max="16">
        <br>
        <br>
        性别：<input type="radio" name="gender" value="m" checked="checked">男
        <input type="radio" name="gender" value="w" >女
        <br>
        <br>
        头像：<input id="userphoto" type="file" name="profile">
        <br>
        <br>
        <select name="province">
            <option>四川</option>
            <option>重庆</option>
            <option>湖南</option>
            <option>湖北</option>
            <option selected="selected">宁夏</option>
        </select>
        <br>
        <br>
        爱好：<input name="hobby" type="checkbox">读书
        <input name="hobby"type="checkbox">写字
        <input name="hobby"type="checkbox">弹琴
        <input name="hobby2"type="checkbox">吹比
        <br>
        <br>
        <textarea name="introduce" cols="30" rows="10">此处是文本输入标签</textarea>
        <br>
        <br>
        个人网站：<input name="userurl" type="url">
        <br>
        <br>
        个人邮箱：<input name="useremail" type="email">
        <br>
        <br>
        身体体重：<input name="userweight" type="number">
        <br>
        <br>
        出生日期：<input name="userdate" type="date">
        <br>
        <br>
        详细时间：<input name="time" type="time">
        <br>
        <br>
        性格颜色：<input name="colorsss" type="color">
        <p>内容输入完了之后，就需要提交了</p>
        <p>下面介绍跟表单提交关系比较紧密的几个属性</p>
        <ol>
            <li>action -指定你提交到哪个服务器地址</li>
            <li>method -提交的方式get/post</li>
            <li>target -提交之后，会得到响应，这时候，你需要展现服务器反馈的内容，这时候你可以选择在哪个窗口展现服务器的响应(当前还是新窗口)</li>
            <li>enctype-编码方式</li>
        </ol>
        <p>关于编码方式，我们需要掌握常见的3种方式</p>
        <ul>
            <li>application/x-www-form-urlencoded:（此方式为默认方式，在发送数据前将数据中的特殊字符进入url编码处理。比如把空格变为+号，将特殊字符转换成ASCII HEX值）<br><br></li>
            <li>text/plain:这种方式与application/x-www-form-urlencoded非常类似，也把空格转换成+号，但是不对特殊字符进行编码<br><br></li>
            <li>multipart/form-data:表示不对字符进行编码。在使用包含文件上传控件的表单时，必须使用该值，类似于<br>
                在android里multipartBodyBuilder.setType(MultipartBody.FORM);<br>
                MultipartBody.FORM所代表的字符串就是：multipart/form-data<br><br>
            </li>
        </ul>

        <input type="submit" value="注册">
        <input type="reset" value="重置">
    </fieldset>

</form>
<p><h3>h5里面关于表单的新特性</h3></p>
<p>1.form属性，上面的例子，所有的内容，标签都是在一个大的form标签里面</p>
<p>2.在h5里面允许你在form标签之外，还有别的标签</p>
<p>3.下面input标签里的form值与上面的form标签的id保持一致的话，这里面的内容在提交的时候，也可以与form标签里面的内容一起提交到服务器</p>
<p>4.input标签的form值与那个form标签的name值一样，就属于那个form标签的一部分。</p>
<input type="text" name="school" form="userform">
<br>
<br>
<p>formxxxx属性</p>
<ol>
    <li>formaction属性用于指定表单提交的地址</li>
    <li>formmethod属性用于指定表单的提交方式</li>
    <li>formtarget属性用于打开服务端响应url的打开方式</li>
    <li>formenctype属性用于指定表单数据提交时的编码方式</li>
</ol>
<p>下面是demo</p>
<form>
    username:<input type="text" name="un">
    <br>
    <br>
    password:<input type="password" name="pw">
    <br>
    <br>
    <input type="submit" value="註冊" formaction="regist url" formmethod="get"
    formtarget="_self" formenctype="application/x-www-form-urlencoded">

    <input type="submit" value="登錄" formaction="login url" formmethod="post"
    formtarget="_blank" formenctype="multipart/form-data">

</form>

</body>
</html>